import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:klcpopup/klcpopup.dart';

class LoginPromptDialog extends StatelessWidget {
  final VoidCallback? onLoginPressed;
  final VoidCallback? onCancelPressed;

  const LoginPromptDialog({
    super.key,
    this.onLoginPressed,
    this.onCancelPressed,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Container(
          width: 320.w,
          margin: EdgeInsets.only(top: 40.h),
          padding: EdgeInsets.fromLTRB(24.w, 60.h, 24.w, 24.w),
          decoration: BoxDecoration(
            color: const Color(0xFFFDF5E1),
            borderRadius: BorderRadius.circular(20.r),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withValues(alpha: 0.15),
                blurRadius: 20.r,
                offset: Offset(0, 8.h),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'Login Required',
                style: TextStyle(
                  fontSize: 20.sp,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'PoetsenOne',
                  color: const Color(0xFF2AB061),
                ),
              ),

              SizedBox(height: 12.h),

              Text(
                'Please login to access this feature and enjoy all the benefits.',
                style: TextStyle(
                  fontSize: 14.sp,
                  color: const Color(0xFF666666),
                  height: 1.4,
                ),
                textAlign: TextAlign.center,
              ),

              SizedBox(height: 24.h),

              Row(
                children: [
                  Expanded(
                    child: GestureDetector(
                      onTap: onCancelPressed,
                      child: Container(
                        height: 48.h,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(24.r),
                          border: Border.all(
                            color: const Color(
                              0xFF2AB061,
                            ).withValues(alpha: 0.3),
                            width: 1,
                          ),
                        ),
                        child: Center(
                          child: Text(
                            'Cancel',
                            style: TextStyle(
                              fontSize: 16.sp,
                              fontWeight: FontWeight.w600,
                              color: const Color(0xFF2AB061),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),

                  SizedBox(width: 12.w),

                  Expanded(
                    child: GestureDetector(
                      onTap: onLoginPressed,
                      child: Container(
                        height: 48.h,
                        decoration: BoxDecoration(
                          gradient: const LinearGradient(
                            colors: [Color(0xFF2AB061), Color(0xFF1E8B4F)],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                          ),
                          borderRadius: BorderRadius.circular(24.r),
                          boxShadow: [
                            BoxShadow(
                              color: const Color(
                                0xFF2AB061,
                              ).withValues(alpha: 0.3),
                              blurRadius: 8.r,
                              offset: Offset(0, 4.h),
                            ),
                          ],
                        ),
                        child: Center(
                          child: Text(
                            'Login',
                            style: TextStyle(
                              fontSize: 16.sp,
                              fontWeight: FontWeight.w600,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        Positioned(
          top: -80.h,
          left: 0,
          right: 0,
          child: Center(
            child: SizedBox(
              width: 230.w,
              height: 195.h,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(40.r),
                child: Image.asset(
                  'assets/resources/flower_dialog.png',
                  width: 230.w,
                  height: 195.h,
                  fit: BoxFit.contain,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      width: 80.w,
                      height: 80.h,
                      decoration: BoxDecoration(
                        color: const Color(0xFF2AB061),
                        borderRadius: BorderRadius.circular(40.r),
                      ),
                      child: Icon(
                        Icons.person_outline,
                        size: 40.sp,
                        color: Colors.white,
                      ),
                    );
                  },
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  static void show(
    BuildContext context, {
    VoidCallback? onLoginPressed,
    VoidCallback? onCancelPressed,
  }) {
    final popupController = KLCPopupController();

    showKLCPopup(
      context,
      controller: popupController,
      horizontalLayout: KLCPopupHorizontalLayout.center,
      verticalLayout: KLCPopupVerticalLayout.center,
      showType: KLCPopupShowType.bounceInFromLeft,
      dismissType: KLCPopupDismissType.bounceOutToBottom,
      child: Material(
        color: Colors.transparent,
        child: LoginPromptDialog(
          onLoginPressed: () {
            popupController.dismiss();
            onLoginPressed?.call();
          },
          onCancelPressed: () {
            popupController.dismiss();
            onCancelPressed?.call();
          },
        ),
      ),
    );
  }
}
